<template>
    <div>
        <el-row :gutter="10">
            <el-col :span="24">
                <el-card class="box-card mt-15">
                    <div class="home-form">
                        <el-form ref="ruleForm" label-width="80px" @submit.native.prevent>
                            <el-row :gutter="10">
                                <el-col :span="6">
                                    <el-form-item label="日期" prop="dateData">
                                        <el-date-picker style="width: 100%" size="mini" v-model="dateData"
                                            value-format="yyyy-MM-dd" type="daterange" range-separator="至"
                                            start-placeholder="开始日期" end-placeholder="结束日期">
                                        </el-date-picker>
                                    </el-form-item>
                                </el-col>

                                <el-col :span="4">
                                    <el-form-item label="销售模式" prop="type">
                                        <el-select v-model="saleMode" placeholder="请选择" style="width:100%" clearable
                                            size="mini">
                                            <el-option label="全部" value="fcv"> </el-option>
                                            <el-option label="按次" :value="0"> </el-option>
                                            <el-option label="包时" :value="1"> </el-option>
                                        </el-select>

                                    </el-form-item>
                                </el-col>
                                <el-col :span="4">
                                    <el-form-item label="姓名">
                                        <el-input placeholder="请输入姓名关键字检索" size="mini" v-model.trim="key"
                                            clearable></el-input>

                                    </el-form-item>
                                </el-col>
                                <el-col :span="4">
                                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleSearch"
                                        class="search-btn">搜索</el-button>
                                </el-col>
                            </el-row>
                        </el-form>
                    </div>
                </el-card>
                <el-card class="box-card">
                    <!-- 头部 -->
                    <div slot="header" class="clearfix fix-lh">
                        自由练总耗课金额：<span class="count-num">{{ count }}元</span>
                    </div>
                    <div class="home-body">
                        <cvue-table :option="tableOption" :data="tableData" ref="tbl1" :isShowAdd="false" :page="page"
                            :tablePage="tablePage" :pageSize="page.pageSize" :loading="tableLoading"
                            @current-change="handleCurrentChange" @size-change="handleSizeChange"
                            @select-change="handleSelectChange" :isShowPage="true">
                            <template slot-scope="scope" slot="saleMode">
                                <div v-if="scope.row.saleMode == 0">按次</div>
                                <div v-else-if="scope.row.saleMode == 1">包时</div>
                                <div v-else>全部</div>
                            </template>
                            
                            <template slot-scope="scope" slot="usedMoney">
                                <div v-if="scope.row.usedMoney == 0">-</div>
                                <div v-else>{{ scope.row.usedMoney / 100 }}</div>
                            </template>

                            <!-- 操作按钮 -->

                        </cvue-table>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { getByDate } from '@/util/tool'
import cvueTable from '@/components/cvue-table'
import { statisticFreeSignCourseUsedMoney, sumFreeSignCourseUsedMoney } from '@/api/manageApi'
import dayjs from 'dayjs'
export default {
    name: 'data-count',
    components: {
        cvueTable
    },
    data() {
        return {

            tablePage: 1,
            tableLoading: false,
            page: {
                total: 1, // 总页数
                currentPage: 1, // 当前页数
                pageSize: 10, // 每页显示多少条
                pageSizes: [10, 50, 100]
            },
            tableOption: {
                stripe: true,
                width: '100%',
                border: true,
                index: false,
                selected: false,
                cloumn: [
                    // { prop: 'index', label: '', align: 'center', width: 58 },
                    { prop: 'userName', label: '会员名称', align: 'center', sortable: true },
                    { prop: 'phone', label: '会员手机号', align: 'center', sortable: true },
                    { prop: 'courseName', label: '课程名称', align: 'center', sortable: true },
                    { prop: 'saleMode', label: '销售模式', align: 'center', sortable: true, slotStatus: true },
                    { prop: 'writeOffTime', label: '触发扣费时间', align: 'center', sortable: true },
                    { prop: 'usedMoney', label: '扣款金额（元）', align: 'center', sortable: true , slotStatus: true }
                ]
            },
            tableData: [

            ],
            dialogIndexEdit: false,
            start: '',
            end: '',
            key: '',
            saleMode: '',
            dateData: [],
            count: 0
        }
    },
    methods: {
        async handleSearch() {
            this.tableLoading = true
            await this.getCount()

            this.tablePage = 1
            await this.getList()
            this.tableLoading = false
        },
        async getCount() {
            let params = {
                saleMode: this.saleMode,
                key: this.key
            }
            if (this.dateData.length > 0) {
                params.start = this.dateData[0]
                params.end = this.dateData[1]
            }
            let res = await sumFreeSignCourseUsedMoney(params)
            this.count = res.data / 100
        },
        async getList() {
            let params = {
                saleMode: this.saleMode,
                key: this.key,
                current: this.tablePage,
                size: this.page.pageSize
            }
            if (this.dateData.length > 0) {
                params.start = this.dateData[0]
                params.end = this.dateData[1]
            }
            let res = await statisticFreeSignCourseUsedMoney(params)
            // this.tableData = res.data

            var data = res.data.records
            this.tableData = data
            this.page.total = parseInt(res.data.total)
            this.page.currentPage = this.tablePage
        },
        // 改变pagesize
        handleSizeChange(val) {
            this.page.pageSize = val
            this.tablePage = 1
            this.getList()
        },
        // 改变页码
        handleCurrentChange(val) {
            this.tablePage = val
            this.getList()
        },
        // 表格选择
        handleSelectChange(val) {

        }
    },
    mounted() {
        this.dateData = [
            dayjs().subtract(1, 'month').format('YYYY-MM-DD'),
            dayjs().format('YYYY-MM-DD')
        ]

        this.handleSearch()
    }
}
</script>
<style scoped>
.count-num {
    font-size: 20px;
    font-weight: bold;
}
</style>
